<template>
    <div id="account">

        <h3>供应商类别</h3>
        <div>
            <el-input value="输入类别名称查询" style="width: 200px;margin-top: 10px;margin-left: 20px;"></el-input>
            <el-select style="margin-left: 10px">
                <el-option>全部</el-option>
                <el-option>显示启用类别</el-option>
                <el-option>显示禁用类别</el-option>
            </el-select>
            <el-button type="primary" style="margin-left: 10px">查询</el-button>
            <div style="float: right;">
                <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
                <el-button type="primary">禁用</el-button>
                <el-button type="primary">启用</el-button>
                <el-button type="primary">刷新</el-button>
            </div>
        </div>
        <hr style="margin-top: 10px">
        <div class="account-content" style="margin-top: 10px;">
            <el-table height="500px" :data="accounts" border style="width: 100%;font-size: 13px;margin-left: 20px;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="accountName" label="类别" width="200">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#66b1ff" inactive-color="#c1c1c1"
                            active-value="1" inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination style="position: relative;left: 700px;bottom: 30px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
            :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
        <el-dialog width="400px" top="100px" title="新增供应商类别" :visible.sync="dialogFormVisible">
            <AddProviderType />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AddAccount from './AddAccount.vue';
import AddCustomerType from './AddCustomerType.vue';
import AddProviderType from './AddProviderType.vue';

export default {
    name: 'Account',
    components: {
        AddAccount,
        AddProviderType
    },
    data() {
        return {
            dialogFormVisible: false,
            //分页参数
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            accounts: [
                {
                    accountCode: 'test1',
                    accountName: 'test1',
                    presentMoney: '1',
                    isDefault: '',
                    accountDate: '',
                    aTypeId: '',
                    status: '1'
                },
                {
                    accountCode: 'test1',
                    accountName: 'test1',
                    presentMoney: '1',
                    isDefault: '',
                    accountDate: '',
                    aTypeId: '',
                    status: '1'
                },
            ]
        }

    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>
#account {
    width: 100%;
    height: 100%;
}

.account-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.account-top h3 {
    display: inline-block;
    margin-right: 1000px;
}

.account-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}
</style>